<template>
  <!-- PV 折线图容器 -->
  <div id="lineChat" class="overflow-x-auto w-full h-60"></div>
</template>

<script setup>
import { format, subDays } from 'date-fns';
import * as echarts from 'echarts'
import { onMounted, watch } from 'vue'

//从父组件中获取数据
const props = defineProps({
  value: {
    type: Object,
    withDefaults: null
  }
})


// 初始化折线图
const init = () => {
  const chartDom = document.getElementById('lineChat')
  const myChart = echarts.init(chartDom)
  let option
  // 从props.value中获取日期集合和PV访问量集合
  const pvDates = props.value.pvDates
  const pvCounts = props.value.pvCounts
  option = {
    xAxis: {
      type: 'category',
      data: pvDates // x 轴数据
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: pvCounts, // 设置 pv 访问量
        type: 'line'
      }
    ]
  };
  option && myChart.setOption(option);
}

onMounted(() => init())
watch(() => props.value, () => init())
</script>